<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="searchForm.mechanismName"
                  placeholder="请输入机构名称..."
                  clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getTableDataList">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="ContactInfoVisible = true">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定删除吗？"
                       @confirm="delHandle(null)">
          <el-button type="danger"
                     slot="reference"
                     :disabled="delBtlStatu">批量删除</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable"
              :data="tableData"
              v-loading="loading"
              row-key="id"
              tooltip-effect="dark"
              style="width: 100%"
              border
              stripe
              @selection-change="handleSelectionChange">
      <template slot="empty">
        <el-empty :image-size="400"></el-empty>
      </template>
      <el-table-column type="selection"
                       width="55"> </el-table-column>

      <!-- <el-table-column prop="idOrder" label="序号" width="120"> </el-table-column> -->
      <el-table-column prop="mechanismName"
                       label="机构名称"
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop="contacts"
                       label="联系人"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="phoneNumber"
                       label="手机号码"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="fixedTelephone"
                       label="固定电话"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="mechanismDepartment"
                       label="机构部门"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="position"
                       label="联系人职务"
                       show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作"
                       width="210%">
        <template slot-scope="scope">
          <el-button type="success"
                     plain
                     size="mini"
                     style="margin-right: -2px"
                     @click="infoHandler(scope.row.id)">详情
          </el-button>
          <el-button type="primary"
                     plain
                     size="mini"
                     @click="editHandle(scope.row.id)"
                     style="margin-right: 6px">修改</el-button>
          <template>
            <el-popconfirm title="确定删除吗？"
                           @confirm="delHandle(scope.row.id)">
              <el-button size="mini"
                         type="danger"
                         plain
                         slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[10, 20, 50, 100]"
                   :current-page="current"
                   :page-size="size"
                   :total="total">
    </el-pagination>
    <el-dialog title=""
               :close-on-click-modal="false"
               append-to-body
               :visible.sync="ContactInfoVisible"
               width="50%"
               :before-close="handleCloseForDepartment">
      <el-form :rules="editFormRules"
               ref="ContactInfoForm"
               :model="ContactInfoForm"
               label-width="140px">
        <el-form-item label="机构名称">
          <el-input prop="mechanismName"
                    v-model="ContactInfoForm.mechanismName"></el-input>
        </el-form-item>
        <el-form-item label="机构部门"
                      prop="mechanismDepartment">
          <el-select v-model="ContactInfoForm.mechanismDepartment"
                     placeholder="机构部门"
                     style="width: 93%"
                     clearable="clearable">
            <!-- <el-option
            v-for="one in departmentList"
            :key="one"
            :value="one"
            :label="one"
          ></el-option> -->
            <el-option v-for="one in departmentList"
                       :key="one"
                       :value="one"
                       :label="one"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="contacts"
                      label="联系人">
          <el-input prop="contacts"
                    v-model="ContactInfoForm.contacts"></el-input>
        </el-form-item>
        <el-form-item prop="phoneNumber"
                      label="手机号码">
          <el-input contacts="phoneNumber"
                    v-model="ContactInfoForm.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="联系人职务">
          <el-input v-model="ContactInfoForm.position"></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="ContactInfoForm.fax"></el-input>
        </el-form-item>
        <el-form-item label="QQ号">
          <el-input v-model="ContactInfoForm.qqId"></el-input>
        </el-form-item>
        <el-form-item label="微信号">
          <el-input v-model="ContactInfoForm.weChatId"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码">
          <el-input v-model="ContactInfoForm.postalCode"></el-input>
        </el-form-item>
        <el-form-item label="固定电话">
          <el-input v-model="ContactInfoForm.fixedTelephone"></el-input>
        </el-form-item>
        <el-form-item label="网址">
          <el-input v-model="ContactInfoForm.website"></el-input>
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="ContactInfoForm.email"></el-input>
        </el-form-item>
        <el-form-item label="通讯网址">
          <el-input v-model="ContactInfoForm.communicationWebsite"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea"
                    v-model="ContactInfoForm.remark"></el-input>
        </el-form-item>
        <br />
        <div class="button_style">
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('ContactInfoForm')">立即保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
    <!--详细信息对话框-->
    <el-dialog title="机构联系方式详细信息"
               :visible.sync="contactDetailDialogVisible"
               width="80%"
               :before-close="contactDetailHandleClose">
      <el-descriptions :column="3"
                       border>
        <el-descriptions-item label="机构名称">{{
          mechanismContactDetailInfo.mechanismName
        }}</el-descriptions-item>
        <el-descriptions-item label="机构部门">{{
          mechanismContactDetailInfo.mechanismDepartment
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{
          mechanismContactDetailInfo.contacts
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{
          mechanismContactDetailInfo.phoneNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人职务">{{
          mechanismContactDetailInfo.position
        }}</el-descriptions-item>
        <el-descriptions-item label="传真">{{
          mechanismContactDetailInfo.fax
        }}</el-descriptions-item>
        <el-descriptions-item label="QQ号">{{
          mechanismContactDetailInfo.qqId
        }}</el-descriptions-item>
        <el-descriptions-item label="微信号">{{
          mechanismContactDetailInfo.weChatId
        }}</el-descriptions-item>
        <el-descriptions-item label="邮政编码">{{
          mechanismContactDetailInfo.postalCode
        }}</el-descriptions-item>
        <el-descriptions-item label="固定电话">{{
          mechanismContactDetailInfo.fixedTelephone
        }}</el-descriptions-item>
        <el-descriptions-item label="网址">{{
          mechanismContactDetailInfo.website
        }}</el-descriptions-item>
        <el-descriptions-item label="Email">{{
          mechanismContactDetailInfo.email
        }}</el-descriptions-item>
        <el-descriptions-item label="通讯地址">{{
          mechanismContactDetailInfo.communicationWebsite
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          mechanismContactDetailInfo.remark
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      contactDetailDialogVisible: false,
      //分页参数的定义并设置默认参数
      total: 0,
      size: 10,
      current: 1,
      // '研发部', '财务部'
      departmentList: [],
      ContactInfoVisible: false,
      ContactInfoForm: {},
      //创建searchForm{}对象，因为是弱语言，所以属性可以赋值时自动帮我们定义，比如searchForm.name赋值时就会自动帮我们添加name属性。
      searchForm: {},
      tableData: [],
      //"批量删除"按钮是否可禁用的标识。为了实现批量选择的数目为0时禁用"批量删除"的逻辑。
      delBtlStatu: true,

      mechanismContactDetailInfo: [],

      editFormRules: {
        contacts: {
          required: true,
          message: '请输入联系人',
          trigger: 'blur',
        },
        phoneNumber: {
          required: true,
          message: '请输入正确的手机号码',
          trigger: 'blur',
        },
      },
    };
  },
  created () {
    this.getTableDataList();
  },
  methods: {
    getSelectList (id) {
      this.$axios
        .get('/mechanism-department/selectList', {
          params: {
            id: id,
          },
        })
        .then((res) => {
          this.departmentList = res.data.data
        });
    },
    getTableDataList () {
      this.loading = true;
      this.$axios
        .get('/mechanism-contact/mechanismContactList', {
          //axios的get请求可以通过 params 对象传递参数。相当于："http://localhost:8080/sys/roles/list?name="普通用户"&current=1&size=10"
          //通过params传递name、current、size参数给后台。后台会根据参数名称接收这三个参数，然后通过Page的构造方法生成分页对象Page。
          params: {
            mechanismName: this.searchForm.mechanismName,
            current: this.current,
            size: this.size,
          },
        })
        .then((res) => {
          /*因为后端传来的是Page对象，所以"records"属性并不是我们定义的，是Page对象中的属性，诸如"current"、"size"、"total"等也是
           *"records"属性存放查询的记录。
           *下面操作获取查询到的记录数据、分页数据
           */
          this.tableData = res.data.data.records;
          this.size = res.data.data.size;
          this.current = res.data.data.current;
          this.total = res.data.data.total;
          this.loading = false;
        });
    },
    resetForm (formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });

      this.ContactInfoVisible = false;
      this.ContactInfoForm = {};
    },

    //新增、编辑用的回调函数
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              '/mechanism-contact/' +
              (this.ContactInfoForm.id ? 'update' : 'add'),
              this.ContactInfoForm
            )
            .then((res) => {
              this.$message({
                showClose: true,
                message: '恭喜你，操作成功',
                type: 'success',
              });
              this.resetForm(formName);
              this.ContactInfoVisible = false;
              this.getTableDataList();
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //删除、批量删除用的回调函数
    delHandle (id) {
      var ids = [];

      if (id) {
        ids.push(id); //单个删除的情况，传入具体id
      } else {
        this.multipleSelection.forEach((row) => {
          ids.push(row.id); //传入null是批量删除的情况
        });
      }

      console.log(ids);

      this.$axios.post('/mechanism-contact/delete', ids).then((res) => {
        var resData = res.data.data;
        this.$message({
          showClose: true,
          message: resData,
          type: 'success',
        });

        this.getTableDataList();
      });
    },
    handleCloseForDepartment () {
      this.ContactInfoVisible = false;
      this.resetForm();
    },
    contactDetailHandleClose () {
      this.contactDetailDialogVisible = false;
    },
    infoHandler (id) {
      this.$axios.get('/mechanism-contact/info/' + id).then((res) => {
        this.contactDetailDialogVisible = true;
        this.mechanismContactDetailInfo = res.data.data;
      });
    },
    //编辑对话框回填用的回调函数
    editHandle (id) {
      this.getSelectList(id);
      this.$axios.get('/mechanism-contact/info/' + id).then((res) => {
        var resData = res.data.data;
        this.ContactInfoForm = resData;

        this.ContactInfoVisible = true;
      });
    },
    //动态获取下拉框
    //elment ui文档提供的分页组件"每页页数"改变触发的回调函数，绑定在<el-pagination>的@size-change="handleSizeChange"属性中
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getTableDataList(); //重新从后端获取新的Page对象实现每页显示多少条记录的逻辑
    },
    //elment ui文档提供的分页组件"当前页"改变触发的回调函数，绑定在<el-pagination>的@current-change="handleCurrentChange"属性中
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.getTableDataList(); //重新从后端获取新的Page对象实现当前第几页的逻辑
    },
    //elment ui文档提供的全选/全不选触发的回调函数
    toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //elment ui文档提供的勾选触发的回调函数，绑定在<el-table>的@selection-change="handleSelectionChange"属性中
    //其中val值是勾选对象的Array形式，val中的item.id就是行数据的id
    handleSelectionChange (val) {
      console.log('勾选');
      console.log(val);
      this.multipleSelection = val; //通过此处来确定表格中被批量勾选的所有记录对象的数组

      //先=赋值，再==比较，得到布尔类型结果。含义是没有勾选的会通过delBtlStatu=0也就是false来禁用"批量删除"按钮
      this.delBtlStatu = val.length == 0;
    },
  },
};
</script>

<style>
.el-form-item {
  display: inline-block !important;
}
.el-dialog {
  height: 70%;
}
.button_style {
  position: relative;
  float: left;
  left: 27%;
}
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>
